<template>
  <view class="container" v-if="!isLoading">
    <view class="search-wrapper">
	    <view class="search-input">
	      <view class="search-input-wrapper">
	        <view class="left">
	          <text class="search-icon iconfont icon-search"></text>
	        </view>
	        <view class="right">
	          <input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的姓名" type="text"></input>
	        </view>
	      </view>
	    </view>
	    <view class="search-button">
	      <button class="button" @click="onSearch" type="warn"> 搜索 </button>
	    </view>
	  </view>

    <mescroll-body 
      ref="mescrollRef"
      :sticky="true"
      @init="mescrollInit"
      :down="{ use: false }"
      :up="upOption"
      @up="upCallback"
    >
      <rank-list :list="list.data" @tabChange="tabChange" />
    </mescroll-body>
  </view>
</template>

<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
import AvatarImage from '@/components/avatar-image';
import { getEmptyPaginateObj, getMoreListData } from '@/core/app';
import * as RankApi from '@/api/dealer/rank';
import RankList from '@/components/rank-list';
const pageSize = 10;

export default {
  components: {
    MescrollBody,
    AvatarImage,
    RankList,
  },
  mixins: [MescrollMixin],
  data() {
    return {
      searchValue: '',
      // 选项卡列表
      tabList: [
        {
          name: '个人业绩排名',
          value: 'self',
        },
        {
          name: '团队业绩排名',
          value: 'team',
        },
      ],
      // 当前选项
      curTab: 0,
      // 列表数据
      list: getEmptyPaginateObj(),
      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: { size: pageSize },
        // 数量要大于12条才显示无更多数据
        noMoreSize: 12,
        // 空布局
        empty: {
          tip: '亲，暂无相关数据',
        },
      },
      // 正在加载
      isLoading: false,
      type: '',
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('options', options);
    this.type = options.type;
    this.setPageTitle(
      options.type === 'self' ? '个人业绩排名' : '团队业绩排名',
    );
  },

  methods: {
    // 设置页面标题
    setPageTitle(setting) {
      uni.setNavigationBarTitle({
        title: setting,
      });
    },

    /**
     * 上拉加载的回调 (页面初始化时也会执行一次)
     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
     * @param {Object} page
     */
    upCallback(page) {
      const app = this; 

      // 设置列表数据
      app
        .getList(page.num)
        .then((list) => { 
          if (app.options.type === 'self') {
            const curPageLen = list.data.length;
          const totalSize = list.total; 
          app.mescroll.endBySize(curPageLen, totalSize);
          } else {
            console.log('listlistlistlistlistlist',list)
            const curPageLen = list.data.length;
          const totalSize = list.data.length; 
          app.mescroll.endBySize(curPageLen, totalSize);
          }
          
          
        })
        .catch((_error) => {
          console.log('_error',_error)
          app.mescroll.endErr();
        });
    },

    getList(pageNo = 1) {
      const app = this;

      if (app.type === 'team') {
        return new Promise((resolve, reject) => {
          RankApi.teamList({ page: pageNo, time_type: this.curTab })
            .then((result) => {
              const newList = {
                data: result.data?.list,
              };

              app.list.data = getMoreListData(newList, app.list, pageNo);
              resolve(newList);
            })
            .catch(reject);
        });
      } else {
        return new Promise((resolve, reject) => { 
          RankApi.list({ page: pageNo, time_type: this.curTab, keyword: this.searchValue })
            .then((result) => {
              const newList = result.data.list;
              app.list.data = getMoreListData(newList, app.list, pageNo);
              resolve(newList);
            })
            .catch(reject);
        });
      }
    },

    // 获取当前标签项的值
    getTabValue() {
      const app = this;
      if (app.tabList.length) {
        return app.tabList[app.curTab].value;
      }
      return 1;
    },

    // 刷新列表数据
    onRefreshList() {
      this.list = getEmptyPaginateObj();
      setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 120);
    },

    tabChange(key) {
      this.onRefreshList();
      this.curTab = key;
      // this.getList();
    },
    onSearch() {
      this.onRefreshList();
      this.getList();
	},
  },
};
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
// 团队人数
.widget-people {
  padding: 15rpx 25rpx;
  height: 65rpx;
  box-sizing: border-box;
  background: #f7f7f7;
}

// 列表内容
.widget-list {
  padding: 10rpx 20rpx 40rpx 20rpx;
  box-sizing: border-box;
}

.widget__detail {
  padding: 20rpx 15rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  border-bottom: 1rpx solid #e7e7e7;

  .user-avatar {
    margin-right: 16rpx;
  }

  .user-info {
    height: 100%;
  }

  .user-nickName {
    margin-bottom: 8rpx;
  }

  .detail__member {
    background-color: #786cff;
    color: #fff;
    padding: 2rpx 15rpx;
    border-radius: 6rpx;
    margin-top: 10rpx;
  }
}

.search-wrapper {
	  display: flex;
	  height: 64rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 10rpx;
	}
	
	// 搜索输入框
	.search-input {
	  width: 80%;
	  background: #fff;
	  border-radius: 10rpx 0 0 10rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	
	  .search-input-wrapper {
	    display: flex;
	
	    .left {
	      display: flex;
	      width: 60rpx;
	      justify-content: center;
	      align-items: center;
	
	      .search-icon {
	        display: block;
	        color: #b4b4b4;
	        font-size: 28rpx;
	      }
	
	    }
	
	    .right {
	      flex: 1;
	
	      input {
	        font-size: 28rpx;
	        height: 64rpx;
	        display: flex;
	        align-items: center;
	
	        .input-placeholder {
	          color: #aba9a9;
	        }
	      }
	
	    }
	  }
	}
	
	// 搜索按钮
	.search-button {
	  width: 20%;
	  box-sizing: border-box;
    display: flex;
    justify-content: center;
	
	  .button {
	    height: 64rpx;
	    font-size: 28rpx;
	    border-radius: 0 5px 5px 0;
	    background: #3F51B5;
	    display: flex;
	    align-items: center;
	  }
	}
</style>
